<template>
  <div>
    <div class="edit-div">
      <div class="page-title">考试管理 > 新建考试</div>
      <div style="margin-top: 20px;" class="page-title">试卷信息</div>
      <div class="demo-input-suffix">
        <span class="form-input-label"><i class="el-icon-star-on"></i>试卷名称：</span>
        <el-input v-model="data.exam_name" placeholder="请输入名称"></el-input>
      </div>
      <div class="demo-input-suffix">
        <span class="form-input-label"><i class="el-icon-star-on"></i>知识点：</span>
        <span @click="showLinkKld" class="link-konwledge">+关联知识点</span>
      </div>
      <div v-if="selectedKlds.length > 0" style="margin: 15px 0 20px 0; display:flex;">
        <span class="form-input-label" style="margin-top: 30px;">关联知识点：</span>
        <div class="linkd-kld-table">
          <el-table
            :data="selectedKlds"
            border
            >
            <el-table-column
              prop="label"
              label="知识点名称">
            </el-table-column>
            <el-table-column
              prop="knowledge_path"
              label="知识点路径">
            </el-table-column>
          </el-table> 
        </div>
      </div>
      <div class="demo-input-suffix">
        <span class="form-input-label"><i class="el-icon-star-on"></i>考试类型：</span>
        <el-radio v-model="exam_type" :label="1">不定时</el-radio>
        <el-radio v-model="exam_type" :label="0">定时</el-radio>
      </div>
      <div class="demo-input-suffix">
        <span class="form-input-label"><i class="el-icon-star-on"></i>付费：</span>
        <el-radio v-model="free" :label="1">免费</el-radio>
        <el-radio v-model="free" :label="0">付费</el-radio>
        <el-input type="number" min="0" v-model="data.price" placeholder="请输入课程价格">
          <i class="el-input__icon" slot="prefix"> ￥ </i>
        </el-input> 元
      </div>
      <div v-if="exam_type == '0'" class="demo-input-suffix">
        <span class="form-input-label">考试时间：</span>
        <el-date-picker
          v-model="data.start_time"
          type="datetime"
          placeholder="请输入截止时间"
          default-time="09:00:00">
        </el-date-picker>
      </div>
      <div class="demo-input-suffix">
        <span class="form-input-label"><i class="el-icon-star-on"></i>考试时长：</span>
        <el-input v-model="data.duration" placeholder="请输入考试时长"></el-input>
      </div>
      <div class="text-input-suffix">
        <span class="form-input-label"><i class="el-icon-star-on"></i>考试描述：</span>
        <el-input type="textarea" style="width: 80%;" :rows="4" v-model="data.exam_describe" placeholder="请输入考试描述"></el-input>
      </div>
      <div style="margin-top: 20px;" class="page-title">题目信息（各题型总分值之和为100）</div>
      <div class="form2">
        <div class="question-input flex-row-between">
          <div class="form-half-input">
            <span class="form-input-label">单选题量：</span>
            <el-input :min="0" v-model="data.MC.total" type="number" ></el-input>
          </div>
          <div class="form-half-input">
            <span class="form-input-label">总分值：</span>
            <el-input v-model="data.MC.score" type="number" ></el-input>
          </div>
        </div>
        <div class="question-input flex-row-between">
          <div class="form-half-input">
            <span class="form-input-label">多选题题：</span>
            <el-input :min="0" v-model="data.MA.total" type="number" ></el-input>
          </div>
          <div class="form-half-input">
            <span class="form-input-label">总分值：</span>
            <el-input v-model="data.MA.score" type="number" ></el-input>
          </div>
        </div>
        <div class="question-input flex-row-between">
          <div class="form-half-input">
            <span class="form-input-label">判断题量：</span>
            <el-input :min="0" v-model="data.TF.total" type="number" ></el-input>
          </div>
          <div class="form-half-input">
            <span class="form-input-label">总分值：</span>
            <el-input v-model="data.TF.score" type="number" ></el-input>
          </div>
        </div>
        <div class="question-input flex-row-between">
          <div class="form-half-input">
            <span class="form-input-label">填空题量：</span>
            <el-input :min="0" v-model="data.BL.total" type="number" ></el-input>
          </div>
          <div class="form-half-input">
            <span class="form-input-label">总分值：</span>
            <el-input v-model="data.BL.score" type="number" ></el-input>
          </div>
        </div>
        <div class="question-input flex-row-between">
          <div class="form-half-input">
            <span class="form-input-label">简答题量：</span>
            <el-input :min="0" v-model="data.SA.total" type="number" ></el-input>
          </div>
          <div class="form-half-input">
            <span class="form-input-label">总分值：</span>
            <el-input v-model="data.SA.score" type="number" ></el-input>
          </div>
        </div>
      </div>
       <LinkKld ref="linkKld" @onSelectKld="onSelectKld" @onClose="onClose" :show="show" />
      <div class="footer">
        <el-button type="primary" @click="onSubmit">保 存</el-button>
        <el-button @click="goBack">取 消</el-button>
      </div>
    </div>
  </div>
</template>
<script>
import CreateFilter from "@/mixins/CreateFilter";
import { examModel } from "@/api/models";
import { Message } from "element-ui";
import LinkKldMixin from '@/mixins/linkKldMixin.js';
export default {
  mixins: [CreateFilter, LinkKldMixin],
  components: {},
  data() {
    return {
      data: {
        exam_name: null,
        start_time: null,
        duration: null,
        exam_describe: null,
        MC: {
          score: 15,
          total: 5
        },
        MA: {
          score: 15,
          total: 5
        },
        TF: {
          score: 15,
          total: 5 
        },
        BL: {
          score: 15,
          total: 5
        },
        SA: {
          score: 40,
          total: 4 
        },
        price:0
      },
      id: null,
      exam_type: 1, 
      free: 0
    };
  },
  mounted() {
    if(this.$route.params.id) {
      this.id = this.$route.params.id
      this.getItem()
    }
  },
  methods: {
    getItem() {
      examModel.item(this.id, (res) => {
        this.data = res.data;
      });
    },
    onSubmit() {
      let d = Object.assign({}, this.data);
      if (
        !d.exam_name ||
        !d.duration ||
        !d.exam_describe
      ) {
        return Message.warning("请填完整信息");
      }
      if (this.free == 0 && d.price<=0) {
        return Message.warning("付费考试必须填入价格");
      }
      d.price = 100 * parseInt(d.price)
      if (this.exam_type == 0 && !d.start_time) {
        return Message.warning("定时考试必须选择开考时间");
      }
      if(d.MC.total > 0 && d.MC.score % d.MC.total !== 0) 
        return Message.warning("单选题分值设置不正确");
      if(d.MA.total > 0 && d.MA.score % d.MA.total !== 0) 
        return Message.warning("多选题分值设置不正确");
      if(d.TF.total > 0 && d.TF.score % d.TF.total !== 0) 
        return Message.warning("判断题分值设置不正确");
      if(d.BL.total > 0 && d.BL.score % d.BL.total !== 0) 
        return Message.warning("填空题分值设置不正确");
      if(d.SA.total > 0 && d.SA.score % d.SA.total !== 0) 
        return Message.warning("简答题分值设置不正确");
      let action = d.id ? examModel.update : examModel.autoCreate 
      d.knowledges = this.selectedKlds.map(v => {
        return v.id;
      })
      if(d.knowledges.length == 0){
        return Message.warning("请选择知识点");
      }
      action(d, res => {
        Message.success(res.message)
        this.goBack()
      }, err => {
        console.log(err)
        Message.warning(err)
      })
    },
    goBack() {
      this.$router.go(-1)
    }
  },
};
</script>
<style lang="scss">
.form{
  text-align: left;
}
.form h2{
  padding-bottom: 10px;
  border-bottom: 1px solid #cccccc;
  margin-bottom: 15px;
}
.form2 {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  width: 80%;
  flex-wrap: wrap;
}
.form2 .form-half-input {
  width: 50%;
}
.question-input {
  padding: 30px 10px;
  border: 1px solid #eeeeee;
  width: 100%;
  margin-top: 10px;
}
</style>